<template>
  <div id="cateSetting" ref="cateSetting">
    <h1 class="title">分类设置</h1>
    <div class="cate-list mt10">
      <!-- 第一层table -->
      <el-table :data="tableData" style="width: 100%" :height="height">
        <el-table-column type="expand" width="30px">
          <template slot-scope="props">
            <!-- 第二层 -->
            <el-table :data="props.row.Details" :show-header="false">
              <el-table-column prop="Id" label="Id"></el-table-column>
              <el-table-column prop="Name" label="标题"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="modifyCate(scope.row)">修改</el-button>
                  <el-button type="text" size="mini" @click="delCate(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="Id" label="Id" width="370px"></el-table-column>
        <el-table-column prop="Name" label="标题" width="360px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleAddClick('add', scope.row.Id)">新 增</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框 -->
    <v-dialog
      :title="editMode === 'ADD' ? '新建分类' : '修改分类' "
      :isVisible="dialogFormVisible"
      @close="closeDialog">
      <template slot="dialog-cont">
        <el-form :model="cateForm" :rules="rules" ref="cateForm" class="dialog-main dialogForm">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="分类名称" prop="Name">
                <el-input v-model="cateForm.Name" placeholder="请输入分类名称"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot="dialog-btns">
        <div class="form-buttons">
          <el-button @click="resetForm" size="mini">重置</el-button>
          <el-button @click="closeDialog" size="mini">关闭</el-button>
          <el-button type="primary" @click="submitForm('cateForm')" size="mini">确定</el-button>
        </div>
      </template>
    </v-dialog>
  </div>
</template>
<script>
  import VDialog from '../../comm/iDialog/iDialog'
  import ajax from '../../../../api/ajax/ajax'
  import api from '../../../../api/url'
  export default {
    name: 'cateSetting',
    components: {
      VDialog
    },
    data () {
      return {
        Det_id: null,
        DictionaryId: null,
        dialogFormVisible: false,
        editMode: 'ADD',
        formLabelWidth: '120px',
        cateForm: {
          Name: ''
        },
        cateData: {},
        rules: {
          Name: [ { required: true, message: '请输入分类名称', trigger: 'blur' } ]
        },
        tableData: [],
        tableDataList: [],
        height: null
      }
    },
    methods: {
      // 工具栏--按钮
      handleAddClick (val, dic) {
        this.DictionaryId = null
        switch (val) {
          case 'add':
            this.addCate(dic)
            break
          default:
            break
        }
      },
      // 新增分类
      addCate (dic) {
        // this.cateForm.category = ''
        this.DictionaryId = dic
        this.editMode = 'ADD'
        this.dialogFormVisible = true
      },
      // 修改
      modifyCate (data) {
        this.cateForm = JSON.parse(JSON.stringify(data))
        this.cateData = JSON.parse(JSON.stringify(data))
        this.Det_id = data.Id
        this.DictionaryId = data.DictionaryId
        this.editMode = 'EDIT'
        this.dialogFormVisible = true
      },
      // 删除
      delCate (data) {
        this.$confirm('是否确定删除?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = { id: data.Id }
          ajax.get(api.DICTIONARY_DETL_DELETE, params)
            .then(res => {
              if (res.Message === 'Success') {
                this.queryDictionarysList()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      // 对话框--确认
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 添加回调
            if (this.editMode === 'ADD') {
              let paramsCreate = {
                Name: this.cateForm.Name,
                DictionaryId: this.DictionaryId
              }
              ajax.post(api.DICTIONARY_DETL_CREATE, paramsCreate)
                .then(res => {
                  if (res.Message === 'Success.') {
                    this.queryDictionarysList()
                    this.closeDialog()
                    this.$message({
                      message: '新增成功',
                      type: 'success'
                    })
                  }
                })
            }
            // 修改回调
            if (this.editMode === 'EDIT') {
              let paramsUpdate = {
                Id: this.Det_id,
                DictionaryId: this.DictionaryId,
                Name: this.cateForm.Name
              }
              ajax.post(api.DICTIONARY_DETL_UPDATE, paramsUpdate)
                .then(res => {
                  if (res.Message === 'Success') {
                    this.queryDictionarysList()
                    this.closeDialog()
                    this.$message({
                      message: '修改成功',
                      type: 'success'
                    })
                  }
                })
            }
          } else {
            return false
          }
        })
      },
      // 初始化表单
      initForm (formName) {
        this.$refs[formName].resetFields()
        this.cateForm = {
          Name: ''
        }
        this.Det_id = null
        this.DictionaryId = null
      },
      resetForm () {
        this.initForm('cateForm')
        if (this.editMode === 'EDIT') {
          this.cateForm = {...this.cateData}
        }
      },
      closeDialog () {
        this.initForm('cateForm')
        this.dialogFormVisible = false
      },
      // 查询列表信息
      queryDictionarysList () {
        ajax.get(api.QUERY_DICTIONARYS)
          .then(res => {
            if (res) {
              this.tableData = res
            }
          })
      }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.cateSetting.offsetHeight - 56
      })
      this.queryDictionarysList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  #cateSetting
    height 100%
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .cate-list
      padding-left 10px
</style>
